<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

const userLogin = reactive({ name: "", pswd: "" })

// 当用户单击登录按钮时
function loginClick() {
  if (!userLogin.name || !userLogin.pswd) {
    ElMessage.error('用户名和密码不能为空')
    return false;
  }

  // 直接返回token字符串
  myPost("/user/login", { username: userLogin.name, password: userLogin.pswd }, token => {
    if (token == "0") {
      ElMessage.error('用户名或密码不正确')
      return false;
    } else {
      localStorage.setItem('username', userLogin.name) // 只保存一个临时name
      localStorage.setItem("usertoken", token)
      window.location = "/"
    }
  })
}

function qqLogin() {
  let qqAppId = '102046486'; // 上面申请得到的appid
  let qqAuthPath = 'https://mylog.cool/#/qq-redirect'; // 前面设置的回调地址
  let state = 'login'; // 防止CSRF攻击的随机参数，必传，登录成功之后会回传，最好后台自己生成然后校验合法性
  location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`
}
</script>

<template>
  <!-- @click.self="router.go(-1)" -->
  <div class="mask">

    <div class="model main">
      <div class="tittle">SAU资讯网</div>
      <div class="inputdiv">
        <input type="text" class="username" v-model="userLogin.name" autocomplete="off" placeholder="用户名" />
      </div>
      <div class="inputdiv">
        <input type="password" class="password" v-model="userLogin.pswd" autocomplete="off" placeholder="密码"
          @keyup.enter="loginClick" />
      </div>

      <div class="dl-btn" @click="loginClick">登 录</div>

      <div class="switch-btn">
        没有账号？<router-link to="/regist">注册一个</router-link>
      </div>

      <div class="other-dl-text">推荐其他方式登录</div>
      <div class="other-dl">
        <span class="odl-btn" style="margin-right:15px" @click="qqLogin" id="qqLoginBtn">
          <i class="odl-icon" style="background-color: rgba(82, 201, 253, 0.2);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="#50C8FD" class="ZDI ZDI--Qq24"
              data-darkreader-inline-fill="" style="--darkreader-inline-fill:#52c9fd;">
              <path fill-rule="evenodd"
                d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.483 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.288.687 6.288 0 0-.688-1.77-1.182-1.77-1.182 2.086-1.77 1.906-3.967 1.906-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.165-6.954-2.165-6.954V9.325C18.29 3.364 14.268 2 12.003 2Z"
                clip-rule="evenodd"></path>
            </svg>
          </i>QQ登录
        </span>
        <span class="odl-btn">
          <i class="odl-icon" style="background-color: rgba(7, 193, 96, 0.2);">
            <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Wechat24">
              <path fill="#07C160"
                d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z"
                clip-rule="evenodd" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#47f89c;"></path>
            </svg>
          </i>微信登录
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.mask {
  // 背景遮罩
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; // 可以实现全屏
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 51; // 最顶

  .main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 51;
    max-width: 600px;
    width: 60%;
    min-width: 370px;
  }
}


// 标题
.main .tittle {
  font-size: 40px;
  margin: 10px 0px;
}

/*输入框*/
.inputdiv {
  margin-top: 10px;

  input {
    color: var(--text-color);
    text-align: center;
    height: 50px;
    width: 250px;
    font-size: 25px;
    border: 0px;
    background: transparent;
    border-bottom: 1px solid var(--mini-text-color);
  }
}

// 登录按钮
.dl-btn {
  height: 40px;
  width: 140px;
  background: #aaa;
  border-radius: 30px;
  border: none;
  font-size: 20px;
  color: #222;
  transition: 0.3s;
  line-height: 40px;
  text-align: center;
  margin-top: 30px;
}

.dl-btn:hover {
  background: #888;
}

//注册跳转
// .switch-btn {}

/* 更多登录方式 */
.other-dl-text {
  margin: 15px 0px 5px;
  color: var(--mini-text-color);
}

.other-dl {
  display: flex;
  justify-content: center;
}

.odl-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.odl-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin-right: 5px;
}



/* 去除自动浏览器自动填充添加的样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 9999s;
  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
</style>